<template>
  <view class="week">
    <text class="week-title">{{ type ? '日漫' : '国漫' }}</text>
    <view class="week-tab">
      <text v-for="(item, index) in weekCn" :key="item" class="week-li" @click="getToday(index)">
        <text :class="{ active: index === today }">周{{ item }}</text>
      </text>
    </view>
    <Item :weeklist="weekItemData" :type="type" />
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Item from '@/components/playItem'
const day = new Date().getDay()
const today = day === 0 ? 6 : day - 1
export default {
  data() {
    return {
      today,
      weekCn: ['一', '二', '三', '四', '五', '六', '日'],
      weekData: [],
      weekItemData: []
    }
  },
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  methods: {
    ...mapActions('list', ['getWeek']),
    getWeekApi() {
      this.getWeek().then(res => {
        this.weekData = res.data
        this.getWeekData()
      })
    },
    getWeekData() {
      const data = this.weekData
      const weekEng = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
      const weekType = this.getArea(data)
      const weekData = this.getEveryWeek(weekType[this.type], this.type)
      this.weekItemData = weekData[weekEng[this.today]]
    },
    getToday(index) {
      this.today = index
      this.getWeekData()
    },
    getArea(weekData = []) {
      let cn = []
      let jp = []
      weekData.map(item => {
        if (item.area === '日本') {
          jp.push(item)
        } else if (item.area === '大陆') {
          cn.push(item)
        }
      })
      return [cn, jp]
    },
    getEveryWeek(weekData) {
      // isCN  1 日本  其他为中国
      let data = {}
      let [Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday] = [[], [], [], [], [], [], []]
      weekData.map(item => {
        const day = item.weekday
        if (day === 1) {
          Monday.push(item)
        } else if (day === 2) {
          Tuesday.push(item)
        } else if (day === 3) {
          Wednesday.push(item)
        } else if (day === 4) {
          Thursday.push(item)
        } else if (day === 5) {
          Friday.push(item)
        } else if (day === 6) {
          Saturday.push(item)
        } else if (day === 7) {
          Sunday.push(item)
        }
      })
      data.Monday = Monday
      data.Tuesday = Tuesday
      data.Wednesday = Wednesday
      data.Thursday = Thursday
      data.Friday = Friday
      data.Saturday = Saturday
      data.Sunday = Sunday
      return data
    }
  },
  mounted() {
    this.getWeekApi()
  },
  components: {
    Item
  }
}
</script>

<style lang="scss" scoped>
.week {
  &-title {
    display: flex;
    font-size: 36rpx;
    padding: 15rpx 20rpx;
    position: relative;
    box-shadow: 0 1px 0 #ebebeb;
  }

  &-tab {
    display: flex;
    flex-flow: row wrap;
    margin-top: 10rpx;
    height: 60rpx;
  }

  &-li {
    flex: 1;
    text-align: center;
    line-height: 60rpx;
    font-size: 24rpx;

    .active {
      color: red;
    }
  }
}
</style>
